(function (window) {
    function Progress($progressBar,$progressLine,$progressDot) {
        return new Progress.prototype.init($progressBar,$progressLine,$progressDot);
    }
    Progress.prototype={
        constructor:Progress,
        init:function ($progressBar,$progressLine,$progressDot) {
            this.$progressBar = $progressBar;
            this.$progressLine = $progressLine;
            this.$progressDot = $progressDot;
        },
        isMove:false,
        progreeClick:function (callBack) {
            $this = this;  // 此刻 this 是外部index的
            //监听背景点击
            this.$progressBar.click(function (event) {
                //获取背景距离窗口默认的位置
                var normalLeft = $(this).offset().left;
                //获取点击的位置距离窗口的位置
                var eventLeft = event.pageX;

                $this.$progressLine.css("width",eventLeft-normalLeft);
                $this.$progressDot.css("left",eventLeft-normalLeft);
                // 同步进度条
                var value =(eventLeft - normalLeft)/$(this).width();
                callBack(value)
            })

        },
        progreeMove:function (callBack) {
            var $this = this;
            //1.监听鼠标的按下事件
            this.$progressBar.mousedown(function () {
                // 获得背景离窗口默认的位置
                var normalLeft = $(this).offset().left;
                //监听鼠标移动事件
                $(document).mousemove(function () {
                    $this.isMove = true;
                    var eventLeft =event.pageX;
                    // 防止拉动超出，给个范围判断
                    if(eventLeft - normalLeft > -5 && eventLeft - normalLeft < 664){
                        $this.$progressLine.css("width",eventLeft-normalLeft);
                        $this.$progressDot.css("left",eventLeft-normalLeft);
                    }
                    // 同步进度条
                    var value =(eventLeft - normalLeft)/$this.$progressBar.width();
                    callBack(value)
                })
            })
            //3.监听鼠标的抬起时间
            $(document).mouseup(function () {
                $(document).off("mousemove");
                $this.isMove = false;

            })

        },
        setProgress:function (value) {
            if(this.isMove) return;
            if(value <0 || value >100) return;
            this.$progressLine.css({
                width:value + "%"
            })
            this.$progressDot.css({
                left:value + "%"
            })
        }
    }
    Progress.prototype.init.prototype = Progress.prototype;
    window.Progress = Progress;
})(window);
